<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/sys/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>农产品质量安全追溯系统</title>
<link rel="stylesheet" href="${path }/cms/css/public.css"/>
<link rel="stylesheet" href="${path }/cms/css/productInquire.css">
<script type="text/javascript" src="${path }/cms/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<%@ include file="/WEB-INF/cms/header.jsp" %>

<div class="productInquire">
    <div>
        <img src="${path }/cms/images/cp1.png" alt="">
    </div>
    <div>
        <img src="${path }/cms/images/cp2.png" alt="">
    </div>
    <div>
        <input type="text" id="querycode" placeholder="请输入产品追溯码" value="${code }" />
        <p>商品条码，例：6901267867891</p>
        <img src="${path }/cms/images/cp5.png" alt="">
    </div>
    <div>
        <a href="javascript:;" onclick="doQuery()">
	        <div>点击查询</div>
	        <img src="${path }/cms/images/cp4.png" alt="点击查询" />
	    </a>
    </div>
</div>

<script type="text/javascript">
function doQuery(){
	location.href = '${path}/c/traceQuery.do?code='+$('#querycode').val();
}
</script>

<div class="inquireResult">
    <div class="qrfffBac">
        <div class="iRTop">
            <h2>查询结果</h2>
            <div></div>
        </div>

		<c:if test="${not empty traceData and traceData.code ne 404 }">
        <div class="iRBottom">
            <div>
                <img src="${traceData.product.img }" alt="">
            </div>
            <div>
                <p>产品名称：${traceData.product.name }</p>
                <p>种植日期：${traceData.product.beginDate }</p>
                <p>采摘日期：${traceData.product.endDate }</p>
                <p>生产园区：${traceData.park.name }</p>
            </div>
        </div>
        
        <c:forEach items="${traceData.groups }" var="group">
        <div class="basicMessage">
            <h3>${group.name }</h3>

			<c:forEach items="${group.records }" var="record">
			<div class="bmBox">
                <div class="bmImg">
                    <c:forEach items="${record.imgs }" var="img">
                    <div>
                        <img src="${img.imgPath }" alt="">
                    </div>
                    </c:forEach>
                </div>
                <div class="bmText">
                    <h2>${record.workdate } ${record.worktime } &nbsp;&nbsp;&nbsp;${record.linkName }</h2>
                    <p>${record.remark }</p>
                    <div class="bmTextNZ">
                        <c:if test="${not empty record.mat }">
                        <span>农资：</span>
                        <button onclick="showMaterial('${record.mat.mtid}')">${record.mat.mtName}</button>
                        </c:if>
                    </div>
                </div>
            </div>
			</c:forEach>
        </div>
        </c:forEach>
        </c:if>
        <c:if test="${empty traceData or traceData.code eq 404 }">
        <div class="basicMessage">
            <h3>  没有找到相关结果</h3>
      	</div>
        </c:if>
    </div>
</div>

<div id="con" class="modelBox">
    <div id="yc" class="modelContent">
        <div class="modelTitleBox">
            <p>生产商</p>
            <p>名称</p>
        </div>
        <div class="modelImgBox">
            <%-- <img src="${path }/res/img/noimg.jpg" alt=""> --%>
        </div>
        <p class="modelMessage">简介
        </p>
    </div>
</div>

<%@ include file="/WEB-INF/cms/footer.jsp" %>
<script type="text/javascript" src="${path }/cms/js/productInquire.js"></script>
<script type="text/javascript">
function showMaterial(mtid){
	$.get('${path}/c/getProRecordMaterial.json?mtid='+mtid, function(data){
		if(!data){
			return;
		}
		var html = '<div class="modelTitleBox">'
			+'<p>'+data.producer+'</p>'
			+'<p>'+data.materialName+'</p>'
			+'</div>'
			+'<div class="modelImgBox">'
			+'<img src="${filepath}/rep_img/'+data.repImg+'" alt="">'
			+'</div>'
			+'<p class="modelMessage">'+data.remark+'</p>';
		
		$('#yc').html(html);
		openBB();
	});
}
</script>

</body>
</html>